<template>
    <div style="min-width:809px">
       <div v-if="$route.path == '/personalAdmin/rewardRanking'">
        <div class="vs-search-box" style="padding: 24px 22px 0 0px;">
            <el-form ref="form" :inline="true" :model="form" label-width="90px">
                <el-form-item label="门店">
                    <el-select v-model="paging.store_id" style="width:230px" placeholder="请选择">
                        <el-option
                            v-for="item in shopList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="打赏时间">
                    <el-date-picker
                        v-model="paging.start_time"
                        type="daterange"
                        align="right"
                        style="width:250px"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="" class="vs-right-btns">
                    <el-button @click="init" >重置</el-button>
                    <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
         </div>
        <div class="vs-table-box">
            <div class="operation-box">
                <el-button style="margin-left:auto;" icon="el-icon-download" :loading="isDerive" @click="derive">导出</el-button>
            </div>
            <el-table :header-cell-style="{background:'#f5f6f8'}" v-loading="loading" :data="tableData"  style="width: 100%">
                <el-table-column prop="num" label="序号" width="50"> </el-table-column>
                <el-table-column prop="store.title" label="门店" > </el-table-column>
                <!-- <el-table-column prop="create_time" label="打赏时间"> </el-table-column> -->
                <el-table-column prop="name" label="员工姓名"> </el-table-column>
                <el-table-column prop="reward_count" label="打赏次数（次）"> </el-table-column>
                <el-table-column prop="reward_sum" label="打赏总金额（元）"> </el-table-column>
                <el-table-column fixed="right" width="140" label="操作"> 
                    <template slot-scope="scope">
                        <span class="tab-table-text" @click=" $router.push( `/personalAdmin/rewardRanking/exceptional?id=${scope.row.id}` ) " >查看</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="vs-paging-box">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="paging.page"
                    :page-size="paging.limit"
                    layout="prev, pager, next, jumper"
                    :total="paging.total">
                </el-pagination>
            </div>
        </div>
       </div>
       <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form:{
                username:'',
                date:''
            },
            paging: {
                staff_id: '',//姓名
                store_id: '',//门店
                start_time:'',//开始时间
                end_date:'',//结束时间
                page: 1,
                total: 0,
                limit: 10,
            },
            loading:false,
            shopList:[],
            tableData: [ ],
            isDerive:false,
        };
    },
    created() {
        this.homegetStore();
        this.rewardList();
    },
    methods: {
        async derive(){
            this.isDerive = true;
            let res = await this.$Http.rewardRankingExport(this.paging);
            this.utils.downloadXlsx(res,'打赏排行')
            this.isDerive = false;
        },
        init(){
            this.paging = this.$options.data().paging;
            this.rewardList();
        },
        async rewardList(){
            this.loading = true;
            let obj = {...this.paging};
            if(obj.start_time&&obj.start_time.length){
                obj.end_date = obj.start_time[1];
                obj.start_time = obj.start_time[0];
            }
            let {code,data} = await this.$Http.rewardRanking(obj);
            this.loading = false;
            if(code){
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        // 获取项目
        async getProject1() {
            let { code, data } = await this.$Http.getProject({is_all:1});
            if (code) {
                this.projectList = data;
            }
        },
        handleCurrentChange(val){
            this.paging.page = val;
            this.rewardList()
        },
        async homegetStore(){
            let {code,data} = await this.$Http.homegetStore();
            if(code){
                this.shopList = data;
            }
        },
        pickerDate(){

        },
        change(){

        }
    },
};
</script>

<style lang="scss" scoped>

.image-thumbnail{
    width: 130px;
    height: 130px;
}
.vs-search-box{
    display: flex;
    padding-right: 22px;
    justify-content: space-between;
    .right{
        width: 150px;
    }
}
.red{
    color: #f00 !important;
}
.operation-box{
    display: flex;
    justify-content: flex-end;
}
</style>